app/containers/markdown/components/emoji/Emoji.tsx (2)

41-41: Minor: simplify space prefix logic

More explicit and avoids falsy truthiness quirks.

-const spaceLeft = index && index > 0 ? ' ' : '';
+const spaceLeft = (index ?? 0) > 0 ? ' ' : '';

---

80-90: Avoid redundant fontSize sources

You pass both size={...} and text styles (styles.text/styles.textBig) that likely set fontSize. Prefer one source to prevent surprises.

app/components/Emoji/Emoji.tsx (3)

5-5: Layering concern: components → containers dependency

components/Emoji imports containers/EmojiPicker/CustomEmoji, creating an upward dependency. Consider moving CustomEmoji to app/components or a shared module to keep layers clean.

---

8-12: Doc the accepted string forms

Clarify via a short JSDoc that emoji (string) may be Unicode, :shortname: or bare shortname, and that ASCII emoticons are rendered verbatim. Helps future call-sites.

---

1-30: Add focused tests for the centralized component

Please add unit tests covering:

• '😄' (Unicode) → renders unchanged
• ':smile:' and 'smile' → render 😄
• ':)' (ASCII) → rendered verbatim
• Custom emoji object → uses CustomEmoji with size applied

I can scaffold Jest tests for these cases if helpful.

app/containers/EmojiPicker/Emoji.tsx (1)

3-11: Optional: memoize to reduce list re-renders

Emoji picker lists can be large; wrapping with React.memo (or memo with a shallow props check) can help.

-import React from 'react';
+import React, { memo } from 'react';
 ...
-export const EmojiPickerEmoji = ({ emoji }: IEmojiProps): React.ReactElement => (
+export const EmojiPickerEmoji = memo(({ emoji }: IEmojiProps): React.ReactElement => (
   <Emoji
     emoji={emoji}
     style={typeof emoji === 'string' ? styles.categoryEmoji : styles.customCategoryEmoji}
   />
-);
+));

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

app/components/Emoji/Emoji.tsx (5)

5-5: Avoid component → container dependency; relocate CustomEmoji to a shared layer

Importing from a container path in a shared component can create layering cycles. Consider moving CustomEmoji under app/components/Emoji/CustomEmoji (or a shared module) and updating imports. Keep a re-export at the old path for compatibility if needed.

---

10-11: Clarify styling API to prevent misuse and casts (add textStyle/imageStyle)

Today a single style prop is cast to both TextStyle and ImageStyle, which is easy to misuse. Keep style for BC, but add explicit textStyle/imageStyle props and apply them in the respective branches.

 interface IEmojiProps {
   emoji: string | ICustomEmoji;
-  style?: StyleProp<TextStyle | ImageStyle>;
+  style?: StyleProp<TextStyle | ImageStyle>; // backward compatible
+  textStyle?: StyleProp<TextStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
   size?: number;
 }
 
-const Emoji = ({ emoji, style, size = 16 }: IEmojiProps) => {
+const Emoji = ({ emoji, style, textStyle, imageStyle, size = 16 }: IEmojiProps) => {
   const { formatShortnameToUnicode } = useShortnameToUnicode(true);
@@
-      <Text style={[{ fontSize: size }, style as StyleProp<TextStyle>]}>
+      <Text style={[{ fontSize: size }, style as StyleProp<TextStyle>, textStyle]}>
         {`${leading}${converted}${trailing}`}
       </Text>
@@
     <CustomEmoji
-      style={[{ width: size, height: size }, style as StyleProp<ImageStyle>]}
+      style={[{ width: size, height: size }, style as StyleProp<ImageStyle>, imageStyle]}
       emoji={emoji}
     />

Also applies to: 37-37, 45-45

---

1-1: Wrap with React.memo to reduce unnecessary re-renders in emoji-heavy lists

This component is frequently used in FlatLists. Memoization gives a cheap win.

-import React from 'react';
+import React, { memo } from 'react';
@@
-export default Emoji;
+export default memo(Emoji);

Also applies to: 51-51

---

37-37: Consider disabling font scaling for predictable emoji sizing

If you want consistent emoji sizes independent of system font scaling, set allowFontScaling={false} (or expose it as a prop defaulting to false).

-      <Text style={[{ fontSize: size }, style as StyleProp<TextStyle>]}>
+      <Text allowFontScaling={false} style={[{ fontSize: size }, style as StyleProp<TextStyle>]}>

---

17-33: Add minimal tests for the conversion matrix

Recommend unit tests covering: Unicode (“😄”), colon shortname (:smile:), bare shortname (smile), ASCII (":)"), unknown shortname (":notfound:"), and custom emoji object. I can draft Jest + @testing-library/react-native tests if you want.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro